<template>
    <div>
        <el-table
            :data="tableData"
            v-adaptive
            height="100px"
            style="width: 100%"
            border
            stripe
            v-loading="tableLoading"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.3)"
            tooltip-effect="dark"
            :header-cell-style="{ background: '#ebeef5', color: '#355987' }"
        >
            <el-table-column type="index" width="35"></el-table-column>
            <!--数据源-->
            <el-table-column
                v-for="(column, index) in tableOption.columns"
                header-align="center"
                v-if="column.isShow"
                :sortable="column.hasSort"
                :key="index"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :width="column.width"
            >
                <template slot-scope="scope">
                    <span v-if="column.slot">
                        <slot :name="column.prop" :scope="scope"></slot>
                    </span>
                    <span v-else-if="column.type!=='scope'">{{scope.row[column.prop]}}</span>
                    <slot v-else name="scope" :scope="scope"></slot>
                </template>

               

            </el-table-column>
            <el-table-column prop="operation" label="操作" align="center" :width="tableOption.operation.width||'100px'" fixed="right">
                <template slot-scope="scope">
                    <slot name="operation" :scope="scope"></slot>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePage.current"
            :page-sizes="[50, 100, 150, 200]"
            :page-size="tablePage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tablePage.total"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    name: 'basicTable',
    props: {
        tableData: {
            // 表格数据源 默认为空数组
            type: Array,
            default: () => []
        },
        tableOption: {
            // 表格的字段展示 默认为空数组
            type: Object,
            default: () => {
                return {
                    columns: []
                }
            }
        },
        tablePage: {
            type: Object,
            default: () => {
                return {
                    size: 10,
                    current: 1,
                    total: 0
                }
            }
        },
        tableLoading: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleSizeChange(size) {
            this.tablePage.size = size
            this.$emit('table-search')
        },
        handleCurrentChange(current) {
            this.tablePage.current = current
            this.$emit('table-search')
        }
    }
}
</script>